<template>
  <view class="container">
    <!-- <view class="header">
      <text class="device-id">{{ deviceId }}</text>
      <view class="header-actions">
        <u-icon name="more-dot-fill" size="22" />
        <u-icon name="scan" size="22" style="margin-left: 12rpx;" />
      </view>
    </view> -->

    <!-- 顶部状态卡片 -->
    <view class="stats-grid">
      <view class="stat-card">
        <text class="stat-top">50Hz</text>
        <text class="stat-sub">运行频率</text>
      </view>
      <view class="stat-card">
        <text class="stat-top">50cm</text>
        <text class="stat-sub">目标液位</text>
      </view>
      <view class="stat-card">
        <text class="stat-top">50cm</text>
        <text class="stat-sub">水箱液位</text>
      </view>
    </view>

    <!-- 泵状态 -->
    <view class="pump-grid">
      <view v-for="(p, idx) in pumps" :key="idx" class="pump-card" :class="p.running ? 'on' : 'off'" @click="togglePump(idx)">
        <view class="pump-head">{{ p.running ? '开机' : '停机' }}</view>
        <view class="pump-body">
          <text>补水泵{{ idx + 1 }}</text>
          <text class="pump-limit">{{ p.limit }}</text>
        </view>
      </view>
    </view>

    <!-- 设置分隔 -->
    <view class="divider">
      <view class="line"></view>
      <text class="divider-text">设置</text>
      <view class="line"></view>
    </view>

    <!-- 设置按钮 -->
    <view class="settings-grid">
      <view class="setting-btn" @click="go(`/pages/index/liquidDevice/index`)" ><text>监控设备</text></view>
      <view class="setting-btn" @click="go(`/pages/index/liquidDevice/index`)"><text>设备参数</text></view>
      <view class="setting-btn" @click="go(`/pages/index/monitorManager/index`)"><text>管理监控者</text></view>
      <view class="setting-btn" @click="rename"><text>修改名称</text></view>
      <view class="setting-btn" @click="go(`/pages/index/liquidDashboard/renew/index`)"><text>流量卡续费</text></view>
      <view class="setting-btn danger" @click="deleteDevice"><text>删除设备</text></view>
    </view>

    <!-- 修改名称弹窗 -->
    <u-modal
      :show="showRename"
      title="修改名称"
      :showCancelButton="true"
      :showConfirmButton="true"
      confirmText="保存"
      cancelText="取消"
      @confirm="onRenameConfirm"
      @cancel="showRename = false"
      @close="showRename = false"
    >
      <view style="padding: 0 20rpx 20rpx;">
        <u-input v-model="renameText" placeholder="请输入设备名称" clearable />
      </view>
    </u-modal>
  </view>
</template>

<script>
import {to} from '@/utils/util.js'
export default {
  data() {
    return {
      deviceId: 'K14900782433343',
      deviceName: '',
      showRename: false,
      renameText: '',
      pumps: [
        { running: false, limit: '下限' },
        { running: false, limit: '下限' },
        { running: false, limit: '上限' },
        { running: true,  limit: '上上限' },
      ],
    };
  },
  onLoad(options) {
    if (options && options.deviceId) this.deviceId = options.deviceId;
  },
  methods: {
    go(url) {
      uni.navigateTo({ url });
    },
    togglePump(i) {
      this.$set(this.pumps, i, { ...this.pumps[i], running: !this.pumps[i].running });
    },
    monitor() { uni.showToast({ title: '监控设备占位', icon: 'none' }); },
    deviceParams() { uni.showToast({ title: '设备参数占位', icon: 'none' }); },
    manageWatchers() { uni.showToast({ title: '管理监控者占位', icon: 'none' }); },
    rename() {
      this.renameText = this.deviceName || '';
      this.showRename = true;
    },
    onRenameConfirm() {
      const name = (this.renameText || '').trim();
      if (!name) {
        uni.showToast({ title: '请输入设备名称', icon: 'none' });
        return;
      }
      this.deviceName = name;
      this.showRename = false;
      uni.showToast({ title: '名称已更新', icon: 'none' });
    },
    renew() {
      const url = `/pages/index/liquidDashboard/renew/index?deviceId=${encodeURIComponent(this.deviceId)}`;
      uni.navigateTo({ url });
    },
    deleteDevice() {
      uni.showModal({
        title: '删除设备',
        content: '确认删除该设备吗？',
        success: ({ confirm }) => {
          if (confirm) uni.showToast({ title: '已删除（占位）', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
page { height: 100%; }
.container { height: 100%; background: #f6f7fb; padding: 16rpx; }

.header { display: flex; align-items: center; justify-content: space-between; padding: 8rpx 6rpx; }
.device-id { font-size: 28rpx; font-weight: 600; color: #1e1f23; }
.header-actions { display: flex; align-items: center; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; margin-top: 16rpx; }
.stat-card { background: #60a4f7; color: #fff; border-radius: 12rpx; padding: 20rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat-top { font-size: 28rpx; font-weight: 600; }
.stat-sub { font-size: 22rpx; margin-top: 6rpx; opacity: .9; }

.pump-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16rpx; margin-top: 16rpx; }
.pump-card { border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04); }
.pump-card .pump-head { background: #000; color: #fff; text-align: center; padding: 10rpx 0; }
.pump-card.off .pump-body { background: #c0c4cc; color: #fff; }
.pump-card.on .pump-head { background: #22c55e; }
.pump-card.on .pump-body { background: #60a4f7; color: #fff; }
.pump-body { padding: 20rpx; text-align: center; }
.pump-limit { display: block; margin-top: 6rpx; }

.divider { display: flex; align-items: center; justify-content: center; margin: 24rpx 0; }
.line { flex: 1; height: 2rpx; background: #e5e7eb; }
.divider-text { margin: 0 20rpx; color: #8b8d93; }

.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; }
.setting-btn { background: #60a4f7; color: #fff; border-radius: 12rpx; height: 120rpx; display: flex; align-items: center; justify-content: center; }
.setting-btn.danger { background: #ff6b6b; }
</style>